<template>
  <el-tooltip :disabled="!timeagoEnable" :content="realTime">
    <span v-if="dateTime">
    <span>{{ preText }} </span>
    <span>{{ timeDisplay }}</span>
    <span> {{ postText }}</span>
  </span>
  </el-tooltip>
</template>

<script>
import { format } from 'timeago.js';

export default {
  name: 'Timeago-v2',
  props: {
    dateTime: { // 时间
      type: String,
      required: true,
    },
    enableType: { // 启用 timeago 的方式，['timeago', 'realTime', 'auto']
      type: String,
      default: 'timeago',
    },
    timeFormat: { // 当 enableType 为 realTime 或 auto 时，显示时间的格式 ['date', 'time', 'seconds', 'week']
      type: Array,
      default: () => ['date', 'time', 'week'], // 默认除秒数外全部显示
    },
    preText: { // 时间之前的内容，主要是为了包裹在tooltip的触发范围里
      type: String,
      required: false,
    },
    postText: { // 时间之后的内容，主要是为了包裹在tooltip的触发范围里
      type: String,
      required: false,
    },
  },
  computed: {
    // 当 enableType 为 auto 时，什么情况下启用 timeago
    timeagoEnable() {
      const thatTimeStamp = new Date(this.dateTime).getTime();
      const thisTimeStamp = new Date().getTime();
      const moreThanADay = thisTimeStamp - thatTimeStamp >= 24 * 60 * 60 * 1000;

      if (this.enableType === 'timeago') return true; // 绝对启用 timeago
      else if (this.enableType === 'realTime') return false; // 绝对启用真实时间（不启用 timeago）
      return this.enableType === 'auto' && !moreThanADay; // 不大于一天时，启用 timeago
    },
    // 显示的时间
    timeDisplay() {
      if (this.timeagoEnable) return format(this.dateTime, 'zh_CN'); // 当启用 timeago 时
      return this.realTime;
    },
    // 真实的时间（当启用timeago时，tooltip也显示这个时间）
    realTime() {
      const thatDay = new Date(this.dateTime);
      const year = thatDay.getFullYear(); // 年
      const month = thatDay.getMonth() + 1; // 月
      const date = thatDay.getDate(); // 日
      const hours = thatDay.getHours(); // 小时
      const minutes = thatDay.getMinutes(); // 分钟
      const seconds = thatDay.getSeconds(); // 秒钟
      const day = thatDay.getDay(); // 每个星期的第几天，`0`代表星期天

      const realTime = [];
      const dateDisplay = this.timeFormat.includes('date');
      const timeDisplay = this.timeFormat.includes('time');
      const secondsDisplay = this.timeFormat.includes('seconds');
      const weekDisplay = this.timeFormat.includes('week');

      if (dateDisplay) {
        if (weekDisplay || !timeDisplay) realTime.push(`${year}年${this.addZero(month)}月${this.addZero(date)}日`);
        else realTime.push(`${year}-${this.addZero(month)}-${this.addZero(date)}`);
      }
      if (timeDisplay) {
        if (secondsDisplay) realTime.push(`${this.addZero(hours)}:${this.addZero(minutes)}:${this.addZero(seconds)}`);
        else realTime.push(`${this.addZero(hours)}:${this.addZero(minutes)}`);
      }
      if (weekDisplay) realTime.push(this.weekCN(day));

      return realTime.join(' ');
    },
  },
  methods: {
    addZero(num) { return num < 10 ? `0${num}` : num; },
    weekCN(weekday) {
      const cn = { 0: '星期天', 1: '星期一', 2: '星期二', 3: '星期三', 4: '星期四', 5: '星期五', 6: '星期六' };
      return cn[weekday];
    },
  },
};
</script>

<style></style>
